<template>
  <div class="app-main-container">
    <div class="app-main-title">{{ $t('message.qlsxt') }}</div>
    <div class="doumee-filter">
      <el-input v-model="filters.deviceStreamId" :placeholder="$t('message.qlsxtsbbm')" clearable />
      <el-input v-model="filters.deviceBaskId" :placeholder="$t('message.lxsxtsbbm')" clearable />
      <el-button v-preventReClick type="primary" @click="getList(1)">{{ $t('message.cz') }}</el-button>
      <el-button v-preventReClick @click="clearList">{{ $t('message.clear') }}</el-button>
    </div>
    <div class="doumee-filter">
      <el-button type="primary" @click="addBind">{{ $t('message.xzgl') }}</el-button>
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      :header-row-class-name="'table-header'"
      class="doumee-element-table"
    >
      <el-table-column
        align="center"
        :label="$t('message.qlsxtsbbm')"
        prop="deviceStreamId"
        min-width="200"
      />
      <el-table-column
        align="center"
        :label="$t('message.lxsxtsbbm')"
        prop="deviceBaskId"
        min-width="200"
      />
      <el-table-column
        align="center"
        :label="$t('message.bz')"
        prop="info"
        min-width="200"
      />
      <el-table-column :label="$t('message.caozuo')" align="center" fixed="right" min-width="200">
        <template slot-scope="scope">
          <div class="flex-cc">
            <el-button v-preventReClick type="text" @click="edit(scope.row)">{{ $t('message.edit') }}</el-button>
            <el-button v-preventReClick type="text" class="secondColor" @click="removeBtn(scope.row.id)">{{ $t('message.del') }}</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="flex-cc doumee-pagination">
      <el-pagination
        background
        hide-on-single-page
        layout="prev, pager, next"
        :current-page.sync="pagination.page"
        :total="total"
        @current-change="getList"
      />
    </div>
    <el-dialog
      :title="isEdit?$t('message.bjsxt') : $t('message.xzsxt')"
      :close-on-click-modal="modalDialog"
      :close-on-press-escape="modalDialog"
      :visible.sync="showAlert"
    >
      <el-form ref="ruleForm" :model="form" :rules="rules" label-suffix="：" label-width="auto">
        <el-form-item :label="$t('message.qlsxtsbbm')" prop="name">
          <el-input v-model="form.deviceStreamId" :placeholder="$t('message.qsr') + $t('message.qlsxtsbbm')" />
        </el-form-item>
        <el-form-item :label="$t('message.lxsxtsbbm')" prop="name">
          <el-input v-model="form.deviceBaskId" :placeholder="$t('message.qsr') + $t('message.lxsxtsbbm')" />
        </el-form-item>
        <el-form-item :label="$t('message.bz')" prop="name">
          <el-input v-model="form.info" :placeholder="$t('message.qsr') + $t('message.bzxx')" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showAlert = false">{{ $t('message.qx') }}</el-button>
        <el-button v-preventReClick :loading="subLoading" type="primary" @click="onSubmit">{{ $t('message.qr') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { cameraBind, cameraBindEdit, cameraBindList, cameraBindRemove } from '@/api'
import store from '@/store'
export default {
  data() {
    return {
      modalDialog: store.getters.dialog,
      subLoading: false,
      pagination: {
        page: 1,
        rows: 10
      },
      total: 0,
      list: [],
      listLoading: true,
      filters: {},
      showAlert: false,
      isEdit: false,
      form: {},
      rules: {
        deviceStreamId: [{ required: true, message: this.$t('message.qsr') + this.$t('message.qlsxtsbbm'), trigger: 'blur' }],
        deviceBaskId: [{ required: true, message: this.$t('message.qsr') + this.$t('message.lxsxtsbbm'), trigger: 'blur' }],
        info: [{ required: true, message: this.$t('message.qsr') + this.$t('message.bzxx'), trigger: 'blur' }]
      }
    }
  },
  created() {
    this.getList(1)
  },
  methods: {
    addBind() {
      this.form = {}
      this.isEdit = false
      this.showAlert = true
    },
    edit(row) {
      this.form = row
      this.isEdit = true
      this.showAlert = true
    },
    removeBtn(id) {
      const that = this
      this.$confirm(this.$t('message.scsxttc'), this.$t('message.ts'), {
        confirmButtonText: this.$t('message.qd'),
        cancelButtonText: this.$t('message.qx'),
        type: 'warning',
        callback: () => {},
        beforeClose: (action, ctx, close) => {
          if (action !== 'confirm') {
            close()
            return
          }
          ctx.confirmButtonLoading = true
          cameraBindRemove({ param: { id }}).then((res) => {
            ctx.confirmButtonLoading = false
            close()
            if (res.errorCode === '000000') {
              that.$message.success(this.$t('message.delcg'))
              that.getList(1)
            }
          })
            .catch(() => { ctx.confirmButtonLoading = false })
        }
      }).finally(() => {})
    },
    onSubmit() {
      const that = this
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          const param = { ... that.form }
          param.venueId = sessionStorage.getItem('venueId')
          const confirmAction = this.isEdit ? cameraBindEdit : cameraBind
          this.subLoading = true
          confirmAction({
            param
          })
            .then(res => {
              this.subLoading = false
              if (res.errorCode === '000000') {
                that.$message.success(this.$t('message.tjsbcg'))
                that.showAlert = false
                that.getList(1)
              }
            })
            .catch(err => {
              this.subLoading = false
              console.log(err)
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    handleClick(e) {
      this.getList(1)
    },
    clearList() {
      this.filters = {}
      this.getList(1)
    },
    getList(page) {
      const { filters, pagination } = this
      const venueId = sessionStorage.getItem('venueId')
      if (page) {
        pagination.page = page
        this.pagination.page = page
      }
      this.listLoading = true
      cameraBindList({
        pagination,
        param: {
          venueId,
          ...filters
        }
      })
        .then(res => {
          this.list = res.recordList
          this.total = res.totalCount
          this.info = res
          this.listLoading = false
        })
        .catch(() => {
          this.listLoading = false
        })
    }
  }
}

</script>

<style lang="scss" scoped>
.hksp {
  width: 100%;
  height: 70vh;
}
.xzsj {
  display: flex;
  align-items: center;
  .division-line {
    margin: 0 20px;
  }
}
.tips{
  display: flex;
  margin-bottom: 20px;
  .tips_box{
    flex: 1;
    display: flex;
    align-items: center;
    background-color: rgba(32, 178, 170, 1);
    &:first-of-type{
      margin-right: 10px;
    }
    &:last-of-type{
      margin-left: 10px;
      background-color: rgba(65, 105, 225, 1);
    }
    div {
      font-size: 20px;
      color: #fff;
      text-align: center;
      padding: 20px 0;
      line-height: 1.5;
      flex: 1;
      p{
        margin: 0;
        &:last-of-type{
          margin-top: 20px;
          font-size: 24px;
          font-weight: bold;
        }
      }
      &.tips_xian{
        width: 1px;
        height: 80px;
        background-color: #fff;
        flex: none;
      }
    }
  }
}
.videobox {
  width: 100%;
  height: 500px;
  overflow: hidden;
}
</style>
<style>
.rqtc .el-picker-panel__footer .el-button--text{
  display: none !important;
}
</style>
